<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 500px;
			background: pink;
          /* 快状元素水平居中			*/
			margin: 0 auto;
             /*	 解决合并塌陷	*/
/*			overflow: hidden;*/
		}
		.box div{
			width: 100px;
			height: 100px;
			background: skyblue;
            /*	margin外边距		*/
            /*  margin一个值的时候 上下左右都是10px          */
/*			margin: 10px;*/
            /* 两个值的时候  表示 上下10px 左右50 */
/*            margin: 10px 50px;*/
            /*  三个值 上10px 左右50px 下100px  */
/*            margin: 10px 50px 100px;*/
           /* 四个值 上10px 右20px 下50px 左100px  */
            margin: 10px 20px 20px 100px;

           /*     
                单独设置margin属性
                    margin-top  上外边距
                    margin-bottom 下外边距
                    margin-left   左外边距
                    margin-right  右外边距

                    小属性可以替换综合写法
                  */
/*            margin-top: 40px;*/

            /*    
            外边距合并塌陷问题：
                  注意： 父子嵌套时，给儿子添加margin
                  第一个子元素的上外边距会扩散给父元素
                  最后一个子元素外边距会扩散给父亲

                  如果上面盒子的下外边距，和下面盒子的上外边距：
                  如果都说正式 且不相等，取最大值
                  如果值相等 只取一个值
                  如果一正一反，取两者和
                  如果都是负数，取绝对值的最大值        


                   */
		}
	</style>
</head>
<body>
    <div class="box">
      <div></div>
      <div style="background-color: red;"></div>
      <div></div>
      <div></div>
    </div>
     <div class="box">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="box">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>


</body>
</html>